<!doctype html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>单行居中，两行居左，超过两行省略</title>
  <!--  <link rel="stylesheet" href="./styles/index.css">-->
</head>
<style>
  *{
    margin:0;
    padding:0;
  }

  h2 em {
    position: relative;
    font-style: normal;
    text-align: left;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .container{
    width:320px;
    padding:0 10px;
    margin:10px auto;
    background: #ddd;
  }

  .container p {
    display: inline-block;
    text-align: center;
  }

  h2{
    text-align: center;
    padding:10px 0;
  }
</style>
<body>
<div class="container">
  <h2><p><em>我是单行标题居中</em></p></h2>
  <h2><p><em>我是两行标题两行标题两行标题居左</em></p></h2>
  <h2><p><em>我是超过两行的标题最后点号省略我是超过两行的标题最后点号省略我是超过两行的标题最后点号省略省略省略</em></p></h2>
</div>
</body>
</html>